* {margin: 0;}
ul, li {padding: 0;list-style: none;}
.side-menu {width: 42px;height: 210px;background-color: #303030;border-radius: 8px;padding: 10px;transition: width 0.2s ease;box-shadow: 3px 4px 16px rgba(187, 187, 187, 0.4);position:fixed;right: 0px;top: 300px;z-index: 1500;}
 .menu-item {color: #fff;height: 42px;display: flex;align-items: center;padding: 0 12px;border-radius: 8px;font-size: 14px;cursor: pointer;white-space: nowrap;position: relative;transition: background-color 0.2s linear;}
.menu-item i {font-size: 16px;}
.menu-text {margin-left: 8px;opacity: 0;transition: opacity 0.1s ease;}
.menu-item:hover {background-color: #646464;}
/* popover气泡提示 */
.popover {position: absolute;top: 50%;right: calc(100% + 7px);transform:translateY(-50%);display: none;background-color: #fff;border-radius: 2px;padding: 8px;color: #333;font-size: 12px;box-shadow: 0px 6px 6px rgb(0 0 0 / 10%);}
/* css三角形: arrow-left */
.popover::before {content: '';position: absolute;border-width: 6px;right: -12px;top: 50%;transform: translateY(-50%);border-style: solid;border-right-color: transparent;border-top-color: transparent;border-left-color: #fff;border-bottom-color: transparent;}
.toogle {position: absolute;width: calc(100% - 20px);padding: 0;bottom: 10px;justify-content: center;}
.toogle i {font-size: 24px;transition: transform 0.2s ease;}
/* collapsible时动效 */
.side-menu.collapsible {width: 42px;}
.side-menu.collapsible .menu-text {opacity: 0;}
.side-menu.collapsible .toogle i {transform: rotate(180deg);}
.side-menu.collapsible .menu-item:hover .popover {display: inline-block;}
@media screen and (max-width: 430px) {
    .side-menu {width: 42px;height: 210px;background-color: #303030;border-radius: 8px;padding: 10px;transition: width 0.2s ease;box-shadow: 3px 4px 16px rgba(187, 187, 187, 0.4);position:fixed;right: 0px;top: 300px;z-index: 1500;display:none;}
}
@media screen and (max-width: 390px) {
    .side-menu {width: 42px;height: 210px;background-color: #303030;border-radius: 8px;padding: 10px;transition: width 0.2s ease;box-shadow: 3px 4px 16px rgba(187, 187, 187, 0.4);position:fixed;right: 0px;top: 300px;z-index: 1500;display:none;}
}
@media screen and (min-width:375px) and (max-width: 389px) {
    .side-menu {width: 42px;height: 210px;background-color: #303030;border-radius: 8px;padding: 10px;transition: width 0.2s ease;box-shadow: 3px 4px 16px rgba(187, 187, 187, 0.4);position:fixed;right: 0px;top: 300px;z-index: 1500;display:none;}
}